<template>
	<view class="pb120">
		<view class="pr">
			<image src="/static/img/order/orderDbg2.png" class="w-max pa top0 left0 h-max"></image>
			<navbar :back="true" :backgroundColor="background" :scrollTop="scrollTop" title="我的订单"
				:titleColor="titleColor" />
			<view class="h260"></view>
		</view>
		<view class="flex-col col-center row-center color-fff h240 pr" style="margin-top: -300rpx;">
			<block v-if="data.status==1||(data.status==0&&data.type==0)">
				<block v-if="data.receive_countdown*1">
					<view class="fs32 fw-800">已通知陪诊师来{{data.type_text}}啦~</view>
					<view class="mt24">
						<text>距{{data.type_text}}结束还剩：</text>
						<u-count-down :timestamp="data.receive_countdown" font-size="30" color="#FFFBA1" separator="zh"
							separator-size="30" bg-color="transparent" :show-seconds="true" class=""
							separator-color="#FFFBA1" @end="getData()"></u-count-down>
					</view>
				</block>
				<block v-else-if="data.status==0&&data.type==0">
					<view class="fs32 fw-800">{{data.type_text}}已结束</view>
					<view class="mt24">{{data.type_text}}已结束，请您尽快选择一位师傅</view>
				</block>
				<block v-else>
					<view class="fs32 fw-800">{{data.type_text}}已结束</view>
					<view class="mt24">{{data.type_text}}已结束，订单失效</view>
				</block>
			</block>
			<block v-else-if="data.status==0">
				<view class="fs32 fw-800">订单待付款</view>
				<view class="mt24 flex">
					<text>请在</text>
					<u-count-down :timestamp="data.pay_countdown" font-size="30" color="#FFFBA1" separator="zh"
						separator-size="30" bg-color="transparent" :show-seconds="true" class=""
						separator-color="#FFFBA1" @end="getData()" />
					<text>内完成支付，超时订单自动取消</text>
				</view>
			</block>
			<block v-else-if="data.status==2">
				<view class="fs32 fw-800">{{data.status_text}}</view>
				<view class="mt24">雇佣成功,等待师傅为你服务</view>
			</block>
			<block v-else>
				<view class="fs32 fw-800">{{data.status_text}}</view>
			</block>
		</view>
		<view class="m20  pt10 pb20 radius20 bg-fff pr">
			<u-tabs :list="tablist" :is-scroll="false" :current="current" @change="e=>current=e" bg-color="transparent"
				:active-color="$zs" inactive-color="#999999" />
		</view>
		<view class="p20 pr" v-if="current==0">
			<view class="pb20" v-if="master">
				<othD :data="master" />
			</view>
			<view class="pb20" v-if="organ">
				<orgD :data="organ" />
			</view>
			<block v-if="data.status==1||(data.status==0&&data.type==0)">
				<!-- order_receive -->
				<view v-for="(item,index) in data.order_receive" :key="index" class="bg-fff radius20 mb20 p20">
					<view class="bg-f8f px20 py10 radius12 flex">
						<view class="color-666 ml20">{{item.organ_id?'陪诊机构':'陪诊师'}}报价：</view>
						<view class="flex1 color-fs">￥{{item.offer_price}}</view>
						<view class="color-999 fs28 ">{{item.add_time}}</view>
					</view>
					<view class="p26 flex">
						<image :src="item.avatar" class="h92 w92 radius" mode="aspectFill"></image>
						<view class="pl24">
							<view class="fs28 color-232323 fw-700">{{item.name}}</view>
							<types :list="item.types" />
						</view>
					</view>
					<block v-if="!item.organ_id">
						<view class="fs26 mt20 pl46 flex ">
							<view class="w50p">
								<text class="color-999">性别：</text>
								<text class="color-232323">{{$list('sex')[item.sex]}}</text>
							</view>
							<text class="color-999  ">年龄：</text>
							<text class="color-232323">{{item.age}}</text>
						</view>
						<view class="fs26 mt20 pl46 flex">
							<view class="w50p">
								<text class="color-999">护龄：</text>
								<text class="color-232323">{{item.service_year}}年</text>
							</view>
							<text class="color-999">籍贯：</text>
							<text class="color-232323">{{item.native_place}}</text>
						</view>
					</block>
					<view class="fs26 mt20 pl46 " v-if="item.remarks">
						<text class="color-999">留言：</text>
						<text class="color-232323">
							<text>{{item.remarks}}</text>
						</text>
					</view>
					<view
						@click="$u.route('/pages/index/demo/pay',{order_sn:data.order_sn,receive_id:item.receive_id||item.id||''})"
						class="bg-zs color-fff h76 radius12 mx44 flex row-center mt40 ">
						雇佣她
					</view>
				</view>
				<view class="radius20 bg-fff pt44 pb50 text-center px70 mb20" v-if="!data.order_receive.length">
					<image src="/static/img/order/order2.png" class="w352 h260" mode=""></image>
					<view class="fs30 color-232323 mt28">
						请关注通知，若有师傅{{data.type_text}}将会在第一 时间通知您
					</view>
					<view class="fs28 color-999 mt24" v-if="data.type==0">您可以在{{data.type_text}}的师傅中挑选一个适合您的</view>
				</view>
			</block>
			<view class="radius20 bg-fff pt44 pb50 text-center mb20" v-else-if="data.status==0">
				<image src="/static/img/order/fk.png" class="w182 h210" mode=""></image>
				<view class="fs30 color-232323 mt50">您已下单成功，记得尽快付款哦~</view>
				<view class="fs28 color-999 mt20">付款后将会有陪诊师跟您联系，并预约服务时间</view>
			</view>

			<view class="mb20 radius20 bg-fff pt22 pb26 text-center">
				<image src="/static/img/order/2.png" class="h148" mode="" v-if="data.type==0"></image>
				<image src="/static/img/order/1.png" class="h148" mode="" v-else></image>
			</view>
		</view>
		<block v-if="current==1">
			<!-- <view class="m20 radius20 relative" v-if="data.status==0">
				<image src="/static/img/order/orderDbg3.png" class="h132 w-max" mode=""></image>
				<view class="absolute top0  h132 w-max pl30  flex">
					<image src="/static/img/order/date.png" class="h60 w60 " mode=""></image>
					<view class="color-fff pl26">
						<view class="fs28 fw-600">{{data.status_text}}</view>
						<view class="fs26 mt14 flex" v-if="data.status==0">
							<u-count-down :timestamp="data.pay_countdown" separator="zh" separatorColor="#fff"
								color="#FFF" font-size="26" separator-size="26" bg-color="transparent"
								@end="getData()" />
							<view class="">后超时,订单自动取消</view>
						</view>
					</view>
				</view>
			</view> -->
			<view class="m20 radius20 bg-fff pt24" v-if="data.type==2">
				<view class="flex ">
					<view class="w6 h20 bg-zs radius4 "></view>
					<view class="fs30 color-232323 ml20">
						陪诊师
					</view>
				</view>
				<view class="p26 flex">
					<image :src="data.avatar" class="h92 w92 radius" mode="aspectFill"></image>
					<view class="pl24">
						<view class="fs28 color-232323 fw-700">{{data.name}}</view>
						<types :list="data.types" />
					</view>
				</view>
			</view>

			<view class="m20 radius20 bg-fff pt24 pr20 pb30">
				<view class="flex ">
					<view class="w6 h20 bg-zs radius4 "></view>
					<view class="fs30 color-232323 ml20">订单信息</view>
				</view>
				<view class="flex row-between pl26  pt26">
					<view class="color-999">服务类型</view>
					<view class="color-zs">{{data.service_name}}</view>
				</view>
				<view class="flex row-between pl26  pt24">
					<view class="color-999">订单编号</view>
					<view class="color-232323">{{data.order_sn}}</view>
				</view>
				<view class="flex row-between pl26  pt24">
					<view class="color-999">下单时间</view>
					<view class="color-232323">{{data.add_time}}</view>
				</view>
				<view class="flex row-between pl26  pt24">
					<view class="color-999">订单金额</view>
					<view class="color-232323">
						<text class="fs26">￥</text>
						<text class="fs32">{{data.actual_price}}</text>
					</view>
				</view>
				<view class="flex row-between pl26  pt24 border-b pb24" v-if="data.coupon_price*1">
					<view class="color-999">优惠券</view>
					<view class="color-yellow">
						<text class="fs26">-￥</text>
						<text class="fs32">{{data.coupon_price}}</text>
					</view>
				</view>
				<view class="text-right pt24 ">
					<text class="color-232323 fs26">应付款</text>
					<text class="color-fs fs26">￥</text>
					<text class="color-fs fs34 fw-700">{{data.pay_price}}</text>
				</view>
			</view>

			<view class="m20 radius20 bg-fff pt24 pr20 pb28 color-232323">
				<view class="flex ">
					<view class="w6 h20 bg-zs radius4 "></view>
					<view class="fs30 ml20">预约信息</view>
				</view>
				<view class="ov-h" :class="seeMore?'':'h330'">
					<view class="flex row-between pl26  pt26" v-if="data[item.field]" v-for="(item,index) in infoList"
						:key="index">
						<view class="color-999">{{item.name}}</view>
						<view class="" v-if="item.type=='img'" @click="$tool.lookImg([data[item.field]])">
							<image :src="data[item.field]" class="w200 h100" mode="scaleToFill"></image>
						</view>
						<view class="" v-else>{{data[item.field]}}</view>
					</view>
				</view>

				<view class="flex row-center mt30" @click="seeMore = !seeMore">
					<view class="fs26 color-999">
						{{seeMore?'收起':'查看更多'}}
					</view>
					<image :src="seeMore?'/static/img/order/more1.png':'/static/img/order/more.png'"
						class="h28 w28 ml18" mode=""></image>
				</view>
			</view>
			<view class="m20 radius20 bg-fff pt24 pb60">
				<view class="flex ">
					<view class="w6 h20 bg-zs radius4 "></view>
					<view class="fs30 color-232323 ml20">
						服务确认码
					</view>
				</view>
				<view class="fs50 fw-700 color-zs text-center mt40">{{data.verify_code}}</view>
			</view>
		</block>
		<view class="m20 radius20 bg-fff py24 px20" v-if="data.status==5">
			<view class="color-fs fw-700 fs28">
				温馨提示：
			</view>
			<view class="color-666 fs26 lh15 mt20">
				若对服务满意，请确认验收，点击下方确认验收按钮，即代 表服务已完成。
			</view>
		</view>

		<view class="h120"></view>
		<view class="fixed bottom0 left0 w-max bg-fff flex ">
			<view class="flex1 p20" v-if="data.status<=4&&data.status!=3">
				<u-button type="warning" ripple plain @click="cancelShow = true">取消订单</u-button>
			</view>
			<view class="flex1 p20" v-if="data.status==0&&data.type!=0">
				<u-button type="warning" ripple @click="$u.route('/pages/index/demo/pay',{order_sn:data.order_sn})">立即付款
				</u-button>
			</view>
			<view class="flex1 p20" v-if="data.status==5">
				<u-button type="warning" ripple @click="check">确认验收
				</u-button>
			</view>
			<view class="flex1 p20" v-if="data.status==6">
				<u-button type="warning" ripple @click="$u.route('/pages/orderList/evaluate',$params)">护工评价
				</u-button>
			</view>
			<view class="flex1 p20" v-if="data.status==3||data.status==7">
				<u-button type="warning" ripple @click="del">删除订单</u-button>
			</view>
		</view>

		<u-popup v-model="cancelShow" mode="center" border-radius="14" width="650">
			<view class="p40 bg-fff ">
				<view class=" fw-700 pb30 tc fs34">取消订单</view>
				<block v-if="data.is_duty==1">
					<view class="flex row-around">
						<view @click="cancelForm.cancel_type=item.id" v-for="(item,index) in cancel_type_list"
							:key="index" class="flex ml60">
							<image class="h32 w32" mode=""
								:src="cancelForm.cancel_type==item.id?'/static/img/my/select.png':'/static/img/my/noselect.png'">
							</image>
							<view class="ml24">{{item.name}}</view>
						</view>
					</view>
					<view class="h20"></view>
					<view class="p20 bg-f5f radius14">
						<textarea placeholder="请输入具体原因" class="w-max" v-model="cancelForm.reason"></textarea>
					</view>
					<view class="mt20 color-red" v-if="cancelForm.cancel_type==0">{{data.duty_tips}}</view>
				</block>
				<view class="tc" v-else>你确定取消订单吗！</view>
				<view class="h40"></view>
				<u-button type="warning" ripple @click="cancelOrder">确定</u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				infoList: [{
						name: '期望就诊时间',
						field: 'expect_time',
					},
					{
						name: '就诊医院',
						field: 'hospital',
					},
					{
						name: '科室',
						field: 'department',
					},
					{
						name: '就诊人',
						field: 'name',
					},
					{
						name: '就诊人电话',
						field: 'phone',
					},
					{
						name: '就诊人身份证号',
						field: 'card_no',
					},
					{
						name: '与就诊人关系',
						field: 'relation',
					},
					{
						name: '预约人电话',
						field: 'mobile',
					},
					{
						name: '报告类型',
						field: 'report_type',
					},
					{
						name: '登记号',
						field: 'register_no',
					},
					{
						name: '就诊二维码',
						field: 'qr_code',
						type: 'img'
					},
					{
						name: '报告单条形码',
						field: 'bar_code',
						type: 'img'
					},
					{
						name: '药品名称',
						field: 'drugs_name',
					},
					{
						name: '0非处方药,1处方药',
						field: 'drugs_type',
					},
					{
						name: '处方照片',
						field: 'prescription',
						type: 'img'
					},
					{
						name: '床号',
						field: 'bed_num',
					},
					{
						name: '自理能力',
						field: 'ability',
					},
					{
						name: '服务天数',
						field: 'days',
					},
					{
						name: '服务需求',
						field: 'remarks',
					},
				],

				scrollTop: 0,
				background: {
					backgroundImage: 'linear-gradient(91deg, #00C2CF 0%, #1ED2BE 100%)',
				},
				titleColor: '#fff',

				tablist: [{
						name: '陪诊师信息'
					},
					{
						name: '订单信息'
					}
				],
				current: 0,
				seeMore: 0,


				cancelShow: false,
				cancel_type_list: [{
						name: '个人原因',
						id: 0,
					},
					{
						name: '陪诊师原因',
						id: 1
					}
				],
				cancelForm: {
					cancel_type: 0, //0个人原因 1陪诊师原因
					reason: '', //具体原因
				},
				data: '',

				master: '',
				organ: ''
			};
		},
		onPageScroll: function(e) {
			this.scrollTop = e.scrollTop
		},
		onLoad() {
			uni.$once('cancelOrder', e => {
				this.cancelShow = true
			})
		},
		onShow() {
			this.getData()
		},
		methods: {
			getData() {
				this.$request('/member/order/orderInfo', this.$params).then(res => {
					let data = res.data
					data.type_text = this.$list('type')[data.type]
					this.data = res.data
					if (!res.data.receive_id) return
					if (res.data.master_id) {
						this.masterInfo(res.data.master_id)
					} else if (res.data.organ_id) {
						this.organInfo(res.data.organ_id)
					}
				})
			},
			masterInfo(master_id) {
				this.$request('/member/search/masterInfo', {
					master_id
				}).then(res => {
					this.master = res.data
				})
			},
			organInfo(organ_id) {
				this.$request('/member/search/organInfo', {
					organ_id
				}).then(res => {
					this.organ = res.data
				})
			},
			cancelOrder() {
				let params = {
					...this.$params,
					...this.cancelForm,
				}
				this.$request('/member/order/cancelOrder', params).then(res => {
					this.$msg(res.msg)
					this.cancelShow = false
					this.getData()
				})
			},
			check() {
				this.$showModal('验收').then(res => {
					this.$request('/member/order/check', this.$params).then(res => {
						this.$msg(res.msg)
						this.getData()
					})
				})
			},
			del() {
				this.$showModal('删除订单').then(res => {
					this.$request('/member/order/delOrder', this.$params).then(res => {
						this.$msg(res.msg)
						setTimeout(this.$navBack, 1000)
					})
				})
			},
		}
	}
</script>

<style lang="scss">

</style>
